<template>
  <a-range-picker :value="[startDateShow, endDateShow]" :show-time="showTime" :format="format" :placeholder="placeholder" @change="changeValue" />
</template>

<script lang="ts">
import { defineComponent } from 'vue'

import moment from 'moment'

export default defineComponent({
  name: 'DateTimeRange',
  props: {
    startDate: Number,
    endDate: Number,
    showTime: {
      type: [Object, Boolean],
      default() {
        return { defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('00:00:00', 'HH:mm:ss')] }
      }
    },
    format: {
      type: String,
      default: 'YYYY-MM-DD HH:mm:ss',
    },
    placeholder: {
      type: Array,
      default() {
        return ['开始日期时间', '结束日期时间']
      }
    },
  },
  emits: [
    'update:startDate',
    'update:endDate',
    'change'
  ],
  data() {
    return {
    }
  },
  computed: {
    startDateShow() {
      return this.startDate ? moment(this.startDate) : this.startDate
    },
    endDateShow() {
      return this.endDate ? moment(this.endDate) : this.endDate
    },
  },
  methods: {
    changeValue(date, dateString) {
      if (date[0] && date[1]) {
        this.$emit('update:startDate', +date[0])
        this.$emit('update:endDate', +date[1])
        this.$emit('change', +date[0], +date[1])
      } else {
        this.$emit('update:startDate', null)
        this.$emit('update:endDate', null)
        this.$emit('change', null, null)
      }
    },
  },
  mounted() {
  }
})
</script>

<style scoped lang="less">

</style>
